

<!--
/**
 * [table description]
 * @label       {String}    标签
 * @type        {String}    类型
 * @field       {String}    字段
 * @option      {Array}     数据选项
 * @labelWidth  {String}    标签宽度
 * @sortable    {String}    是否排序
 * @amend       {Boolean}   是否直接修改   
 * @tips        {Boolean}   是否添加头部说明
 * @headTips    {Object}    头部提示内容  tips:true  方才有效
 * @filters     {Array}     表头筛选功能
 */
-->

<template>
  <el-form label-postion="left" ref="form" size="mini" label-width="90px" class="column-attribute">
   <!-- value-- {{value}} -->
    <el-form-item label="表头文字：">
        <el-input v-model="value.label" placeholder="请输入表头文字"></el-input>
    </el-form-item>
    <el-form-item label="对应字段：">
      <el-select v-model="value.field" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="表格宽度：">
        <el-input-number v-model="value.labelWidth" placeholder="请输入表格宽度" />
    </el-form-item>
    <el-form-item label="显示类型：" class="radio-group">
      <el-radio-group v-model="value.type">
        <el-radio label="action">操作</el-radio>
        <el-radio label="switch">开关</el-radio>
        <el-radio label="image">图片</el-radio>
        <el-radio label="input">文本</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="设置排序：">
      <el-radio-group v-model="value.sort">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否可编辑：">
      <el-radio-group v-model="value.amend">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="label-margin">
      <div>是否添加头部说明：</div>
      <el-radio-group v-model="value.tips">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="value.tips" label="提示内容：">
      <el-input v-model="value.headTips" placeholder="请输入提示内容"></el-input>
    </el-form-item>
    <el-form-item class="label-margin">
      <div>是否开启筛选：</div>
      <el-radio-group v-model="screen">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="screen" label="添加筛选项：">
      <el-input placeholder="请输入筛选选项" v-model="label" class="input-with-select">
        <el-button slot="append" icon="el-icon-plus" @click="addFilters"></el-button>
      </el-input>
    </el-form-item>
    <el-form-item v-if="screen" class="label-margin">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent">
      </el-tree>
    </el-form-item>
  </el-form>
</template>
<script type="text/javascript">
export default {
  name:"table-column-attribute",
  props:{
    value:[Array,Object],
  },
  components: {
    //empty
  },
  data() {
    return {
        //是否开启筛选
        screen:false,
        label:'',

        options: [{
          value: 'action',
          label: '操作'
        },{
          value: 'date',
          label: '日期'
        }, {
          value: 'name',
          label: '名字'
        }, {
          value: 'address',
          label: '地址'
        }],

        data:[{
          id: 1,
          label: '筛选项',
          children:[{
            label:'一个',
            id:9,
          }]
        }]
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
      screen(val,old){
        if(!val){
          this.value.filters = this.data[0].children = [];
        }
      }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
      this.data[0].children = this.value.filters;
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" class="tree-delete" icon="el-icon-delete" type="text" on-click={ () => this.remove(node, data) }></el-button>
            </span>
          </span>);
      },


      /**
       * 添加筛选项
       */
      addFilters(){
        if(this.label){
          var box = {
            label:this.label,
            text:this.label,
            value:this.label,
            id:(new Date()).valueOf(),
          }

          if(!this.data.length>0){
            var tree = {
              label:"筛选项",
              id:1,
              children:[]
            }
            this.data.push(tree);
          }
          this.data[0].children.push(box);
        }
      },
      /**
       * 删除筛选项
       * @return {[type]} [description]
       */
      remove(node, data){
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      }
  }
}

</script>
<style type="text/css" lang="scss">
.column-attribute{
  padding: 10px;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .el-form-item__label{
    text-align: right;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }
  .el-form-item__label,.el-form-item__content{
    font-size: 12px !important;
  }

  .radio-group{
    .el-radio{
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  .label-margin{
    .el-form-item__content{
      margin-left: 0px !important;
      padding-left: 5px;
      color:#606266;
      .el-radio-group{
        margin-left: 40px;
      }
    }
  }

  .el-tree{
    background-color: rgba(0,0,0,0);
    .custom-tree-node{
      width: 100%;
      padding-right: 10px;
      display: flex;
      align-items:flex-start;
      justify-content:space-between;
    }
    .tree-delete{
      color: red;
    }
  }

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>
